<template>
  <div>
    <heaDer></heaDer>
    <div class="content">
      <div
        style="width: 50%; text-align: center; margin: 5% auto"
        v-show="xianshi"
      >
        <van-loading />
      </div>
      <template v-for="item in answerList">
        <div class="single" @click="toDetail(item.id)">
          <div>
            <div class="one_line">{{ item.title || "标题" }}</div>
            <div style="width: 100%; color: #aeaeae; font-size: 12px">
              {{ item.createTime || "时间" }}
              <div
                v-if="item.isEnd == 1"
                @click="toDetail({ id: item.id, type: item.type })"
                class="but"
                style="
                  background-color: rgb(174, 174, 174);
                  color: rgb(255, 255, 255);
                  padding: 4px 6px;
                  border-radius: 14px;
                  font-size: 14px;
                  float: right;
                  margin-top: -3%;
                "
              >
                已答题
              </div>
              <div
                v-if="item.isEnd == 0"
                @click="toDetail({ id: item.id, type: item.type })"
                class="but"
                style="
                  background-color: orange;
                  color: rgb(255, 255, 255);
                  padding: 4px 6px;
                  border-radius: 14px;
                  font-size: 14px;
                  float: right;
                  margin-top: -3%;
                "
              >
                未答题
              </div>
            </div>

            <div style="clear: both"></div>
          </div>
        </div>
      </template>
      <div style="text-align: center; padding: 20px" v-show="yincang">
        <div class="zwxximg">
          <img src="../../../assets/zwxx.png" alt="" />
        </div>
        <div class="zwxx">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import heaDer from "@/components/page/header/header.vue";
export default {
  data() {
    return {
      answerList: [],
      xianshi: true,
      yincang: false,
    };
  },
  components: {
    heaDer,
  },
  mounted() {
    this.registerAns();
    document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {
      WeixinJSBridge.call("hideOptionMenu");
    });
  },
  methods: {
    registerAns() {
      request({
        url: "/generator/awardnaire/front/list",
        method: "get",
      }).then((response) => {
        this.answerList = response.list;
        this.xianshi = false;
        if (this.answerList == "") {
          this.yincang = true;
        } else {
          this.yincang = false;
        }
      });
    },
    toDetail(row) {
      let userId = window.localStorage.getItem("userId");
      this.$router.push({
        name: "answerDetail",
        query: { row: row, shareUserId: userId },
        params: { time: new Date().getTime() },
      });
    },
  },
};
</script>

<style scoped="scoped">
.content {
  overflow: hidden;
  padding: 0 12px 12px;
}
.top {
  height: 40px;
}
.top > div {
  width: 50%;
  height: 100%;
  border-bottom: 1px solid #f8f8f8;
  border-color: #f8f8f8;
}
.active {
  background-color: #ffe090;
  color: orange;
  border-color: #ffe090;
}
.single {
  border-bottom: 1px solid rgb(235, 235, 235);
  /* display: flex; */
  align-items: center;
  width: 90%;
  margin: 0px auto;
  padding: 20px 0px;
}
.single > div:nth-child(1) {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 8px;
}
.single > div:nth-child(2) {
  font-size: 14px;
  color: #b9b9b9;
}
.one_line {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4%;
}
.but {
  min-width: 68px;
  text-align: center;
}
</style>
